<!DOCTYPE html>
<html>

<head>
  <title>基础中国象棋</title>
  <style>
    #chessboard {
      width: 450px;
      height: 500px;
      background: #EACDA3;
      position: relative;
      margin: 20px auto;
    }

    .tile {
      width: 50px;
      height: 50px;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .piece {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      font-size: 24px;
      font-family: Arial;
      user-select: none;
      transition: transform 0.2s;
    }

    .red {
      background: #FF4444;
      color: white;
    }

    .black {
      background: #333;
      color: white;
    }

    .selected {
      box-shadow: 0 0 10px blue;
      transform: scale(1.1);
    }
  </style>
</head>

<body>
  <div id="chessboard"></div>

  <script>
    const board = document.getElementById('chessboard');
    const tileSize = 50;
    const cols = 9, rows = 10;

    // 游戏状态
    let currentPlayer = 'red';
    let selectedPiece = null;
    let chessData = Array(cols).fill().map(() => Array(rows).fill(null));

    // 棋子初始配置
    const initialPieces = [
      // 红方棋子
      { x: 0, y: 9, t: 'ju', c: 'red' }, { x: 1, y: 9, t: 'ma', c: 'red' }, { x: 2, y: 9, t: 'xiang', c: 'red' },
      { x: 3, y: 9, t: 'shi', c: 'red' }, { x: 4, y: 9, t: 'jiang', c: 'red' }, { x: 5, y: 9, t: 'shi', c: 'red' },
      { x: 6, y: 9, t: 'xiang', c: 'red' }, { x: 7, y: 9, t: 'ma', c: 'red' }, { x: 8, y: 9, t: 'ju', c: 'red' },
      { x: 1, y: 7, t: 'pao', c: 'red' }, { x: 7, y: 7, t: 'pao', c: 'red' },
      { x: 0, y: 6, t: 'bing', c: 'red' }, { x: 2, y: 6, t: 'bing', c: 'red' }, { x: 4, y: 6, t: 'bing', c: 'red' },
      { x: 6, y: 6, t: 'bing', c: 'red' }, { x: 8, y: 6, t: 'bing', c: 'red' },

      // 黑方棋子
      { x: 0, y: 0, t: 'ju', c: 'black' }, { x: 1, y: 0, t: 'ma', c: 'black' }, { x: 2, y: 0, t: 'xiang', c: 'black' },
      { x: 3, y: 0, t: 'shi', c: 'black' }, { x: 4, y: 0, t: 'jiang', c: 'black' }, { x: 5, y: 0, t: 'shi', c: 'black' },
      { x: 6, y: 0, t: 'xiang', c: 'black' }, { x: 7, y: 0, t: 'ma', c: 'black' }, { x: 8, y: 0, t: 'ju', c: 'black' },
      { x: 1, y: 2, t: 'pao', c: 'black' }, { x: 7, y: 2, t: 'pao', c: 'black' },
      { x: 0, y: 3, t: 'zu', c: 'black' }, { x: 2, y: 3, t: 'zu', c: 'black' }, { x: 4, y: 3, t: 'zu', c: 'black' },
      { x: 6, y: 3, t: 'zu', c: 'black' }, { x: 8, y: 3, t: 'zu', c: 'black' },
    ];

    // 文字映射
    const charMap = {
      ju: { red: '車', black: '車' },
      ma: { red: '馬', black: '馬' },
      xiang: { red: '相', black: '象' },
      shi: { red: '仕', black: '士' },
      jiang: { red: '帥', black: '將' },
      pao: { red: '炮', black: '砲' },
      bing: { red: '兵', black: '卒' },
      zu: { red: '兵', black: '卒' }
    };

    // 初始化棋盘
    function initBoard() {
      initialPieces.forEach(p => {
        chessData[p.x][p.y] = { type: p.t, color: p.c };
      });
      render();
    }

    // 渲染棋盘
    function render() {
      board.innerHTML = '';
      for (let x = 0; x < cols; x++) {
        for (let y = 0; y < rows; y++) {
          const tile = document.createElement('div');
          tile.className = 'tile';
          tile.style.left = x * tileSize + 'px';
          tile.style.top = y * tileSize + 'px';
          tile.dataset.x = x;
          tile.dataset.y = y;
          tile.addEventListener('click', handleClick);

          const piece = chessData[x][y];
          if (piece) {
            const pieceEl = document.createElement('div');
            pieceEl.className = `piece ${piece.color}` +
              (selectedPiece?.x === x && selectedPiece?.y === y ? ' selected' : '');
            pieceEl.textContent = charMap[piece.type][piece.color];
            tile.appendChild(pieceEl);
          }
          board.appendChild(tile);
        }
      }
    }

    // 点击处理
    function handleClick(e) {
      const x = +e.currentTarget.dataset.x;
      const y = +e.currentTarget.dataset.y;

      if (!selectedPiece) { // 选择棋子
        if (chessData[x][y]?.color === currentPlayer) {
          selectedPiece = { x, y };
          render();
        }
      } else { // 移动棋子
        const targetPiece = chessData[x][y];

        // 基础规则检查
        if (targetPiece?.color === currentPlayer) {
          selectedPiece = { x, y };
          render();
          return;
        }

        // 执行移动
        chessData[x][y] = chessData[selectedPiece.x][selectedPiece.y];
        chessData[selectedPiece.x][selectedPiece.y] = null;

        // 切换玩家
        currentPlayer = currentPlayer === 'red' ? 'black' : 'red';
        selectedPiece = null;
        render();
      }
    }

    // 启动游戏
    initBoard();
  </script>
</body>

</html>